<template name="tcGoodList">
	<view class="goodBox">
		<view class="leftBox">
			<block v-for="(item,index) in goodList" :key="index" v-if="index%2==0">
				<view class="goodItem" data-url="goodDetail" @tap="toPage" :data-id="item.id">
					<view class="imgBox">
						<image mode="widthFix" :src="item.img"></image>
					</view>
					<view class="infoBox">
						<text class="goodTitle">{{item.name}}</text>
						<view class="priceBox">
							<text class="priceNow">￥{{item.prepay}}</text>
							<text class="sellCount" v-text="getYuyue(item.sold)"></text>
				
						</view>
						<view class="shopBox">
							<text class="shopName">{{shopInfo.name}}</text>
							<text class="distance" >{{dis}}</text>
						</view>
					</view>
				</view>
			</block>
		</view>
		<view class="rightBox">
			<block v-for="(item,index) in goodList" :key="index" v-if="index%2==1">
				<view class="goodItem" data-url="goodDetail" @tap="toPage" :data-id="item.id">
					<view class="imgBox">
						<image mode="widthFix" :src="item.img"></image>
					</view>
					<view class="infoBox">
						<text class="goodTitle">{{item.name}}</text>
						<view class="priceBox">
							<text class="priceNow">￥{{item.prepay}}</text>
							<text class="sellCount" v-text="getYuyue(item.sold)"></text>
				
						</view>
						<view class="shopBox">
							<text class="shopName">{{shopInfo.name}}</text>
							<text class="distance" >{{dis}}</text>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import API from "@/common/api.js";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		name: 'tcGoodList', //组件名称
		computed:{
			...mapState({
				locationCity:state=>state.map.locationCity,
				roads:state=>state.map.roads,
			})
		},
		// 传递参数
		props: {
			bottom:0,
			goodList: {
				type: Array,
				default: null
			},
			shopInfo: {
				type: Object,
				default: null
			},
		},
		// 组件参数
		data() {
			return {
				dis: '0米',
				soldCount:0
			}
		},
		// 组件方法
		methods: {
			apiGetDis(){
				let _now=this.roads.longitude+','+this.roads.latitude;
				let _to=this.shopInfo.longi+','+this.shopInfo.lati;
				API.getDistance(_now,_to)
				.then(res=>{
					this.dis=res;
				})
			},
			getYuyue(e){
				let cnt=parseInt(e);
				if(cnt<10000){
					return cnt+'人预约'
				}else{
					return parseFloat(cnt/10000).toFixed(1)+'万人预约' 
				}
			}
		},
		created() {
			
			setTimeout(()=>{
				this.getYuyue();
				this.apiGetDis()
			},500)
		}
	}
</script>

<style lang="less" scoped>

	.goodBox {
		background-color: #f6f6f6;
		padding:0 14rpx 20rpx 14rpx;
		display: flex;
		
		.leftBox,.rightBox{
			width: 50%;
			display: flex;
			padding: 0 14rpx;
			display: flex;
			flex-direction: column;
		}
		.goodItem {
			width: 100%;
			background-color: #fdfdff;
			box-shadow: 0rpx 4rpx 17rpx 0rpx rgba(201, 202, 208, 0.35);
			border-radius: 14rpx;
			display: flex;
			flex-direction: column;
			justify-content: stretch;
			overflow: hidden;
			margin-bottom: 20rpx;
			.imgBox {
				border-radius: 14rpx;
				display: flex;
				justify-content: stretch;
				overflow: hidden;

				image {
					width: 100%;
				}
			}

			.infoBox {
				width: 100%;
				padding: 10rpx;
				display: flex;
				flex-direction: column;
				.goodTitle {
					font-size: 28rpx;
					color: #202932;
					font-size: 28upx;
					padding: 0 10upx;
					margin: 10upx 0;
					color: #202932;
					line-height: 28upx;
					display: block;
					height: 56upx;
					overflow: hidden;
				}
			}

			.tagBox {
				display: flex;
				flex-wrap: wrap;
			}

			.discount {
				font-size: 18rpx;
				color: #ff4738;
			}

			.priceBox {
				display: flex;
				align-items: baseline;
			}

			.priceNow {
				font-size: 33rpx;
				font-weight: bold;
				color: #ff3b2b;
			}

			.priceOld {
				font-size: 18rpx;
				text-decoration: line-through;
				color: #959ca6;
			}

			.sellCount {
				font-size: 18rpx;
				color: #959ca6;
				flex: 1;
				text-align: right;
			}
			.tagBox{
				display: flex;
				text{
					height:26rpx;
					background-color: #e5bc7a;
					border-radius: 13rpx;
					padding: 0 8rpx;
					font-size: 20rpx;
					line-height: 26rpx;
					color: #FFFFFF;
					margin-right: 8rpx;
				}
			}
			.shopBox{
				display: flex;
				.shopName{
					font-size: 18rpx;
					color: #959ca6;
					padding-right: 16rpx;
					flex: 1;
					display: block;
					overflow: hidden;
					height: 24rpx;
				}
				.distance{
					font-size: 18rpx;
					color: #959ca6;
				}
			}
		}
	}

	
</style>
